
/*import {APILoader, AutoComplete, Map, MapType, Marker} from '@pansy/react-amap';
import {useState} from 'react';
import {AutoComplete as AntAutoComplete, Input, message, Modal} from 'antd';
import {MapProps} from '@pansy/react-amap/es/map';*/

import { useState } from 'react';
import { AutoComplete as AntAutoComplete, Input } from 'antd';
import { APILoader, AutoComplete,Map, MapType, Marker} from '@pansy/react-amap'
import { message,Modal } from 'antd';
// import { MapProps } from '@pansy/react-amap/es/map';


const App = (props) => {
  const {findModel , setFindModel} = props
  const [autoComplete, setAutoComplete] = useState<AMap.AutoComplete>();
  const [options, setOptions] = useState([]);

  const handleSearch = (value: string) => {
    if (!autoComplete) return;
    autoComplete.search(value, (status, results) => {
      if (status === 'complete') {
        setOptions(results.tips.filter((item) => item.id).map(renderItem));
      }
    })
  }
  const renderItem = (item: AMap.AutoComplete.Tip) => {
    return {
      ...item,
      value: item.name,
      key: item.id,
      label: (
        <div>
          {item.name}
          <span style={ { paddingLeft: 4, color: 'rgba(0, 0, 0, 0.45)' }}>{item.district}</span>
        </div>
      )
    };
  };
  // 点击获取经纬度（坐标）
  const mapEvents: MapProps['events'] = {
    click: (e) => { message.info(`点击的坐标为${e.lnglat}`) }
  }

  // 地图加载过渡样式
  const loadingStyle = {
    position: 'relative',
    height: '100%',
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  }
  const Loading = <div style={loadingStyle}>Loading Map...</div>

  return (
    <>
      <Modal  okText="确认" onOk={()=>{setFindModel(false)}} title="查找位置" visible={findModel} onCancel={()=>{setFindModel(false)}}>
        <div style={ {height:300} }>
          <APILoader>
            <AutoComplete
              events={ {
                created: (obj) => {
                  setAutoComplete(obj);
                }
              }}
            />
            <AntAutoComplete
              onSearch={handleSearch}
              options={options}
            >
              <Input.Search style={ {width:'450px'} } size="small" placeholder="搜索地点" />
            </AntAutoComplete>
          </APILoader>
          <Map buildingAnimation={true}   zoom={14} events={mapEvents}  loading={Loading} >
            <MapType/>
            <div>
              <Marker
                draggable={true}
                position={ {
                  longitude: 116.308215,
                  latitude:40.012009
                } }
              />
            </div>
          </Map>
        </div>
      </Modal>
    </>
  );
};

export default App
